<template>
	<div class="app-container">
		<el-form :inline="true" :model="queryParams" label-width="68px" ref="queryForm" size="small" v-show="showSearch">
			<el-form-item label="流程类型" prop="bpmnType">

				<el-select clearable placeholder="请选择流程类型" v-model="queryParams.bpmnType">
					<el-option :key="dict.value" :label="dict.label" :value="dict.value"
							   v-for="dict in dict.type.sys_audit_type"/>
				</el-select>
			</el-form-item>

			<el-form-item label="部署时间">
				<el-date-picker
					end-placeholder="结束日期"
					range-separator="-"
					start-placeholder="开始日期"
					style="width: 240px"
					type="datetimerange"
					v-model="daterangeDeployTime"
					value-format="yyyy-MM-dd"/>
			</el-form-item>

			<el-form-item>
				<el-button @click="handleQuery" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
				<el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">

			<el-col :span="1.5">
				<el-button
					@click="bpmnDesigner = true"
					icon="el-icon-plus"
					plain
					size="mini"
					type="primary"
					v-hasPermi="['workflow:bpmnInfo:deploy']">设计流程图</el-button>
			</el-col>

			<el-col :span="1.5">
				<el-button
					@click="handleDeploy"
					icon="el-icon-refresh"
					plain
					size="mini"
					type="primary"
					v-hasPermi="['workflow:bpmnInfo:deploy']">流程文件部署</el-button>
			</el-col>

			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table :data="bpmnInfoList" @selection-change="handleSelectionChange" v-loading="loading">
			<el-table-column align="center" type="selection" width="55"/>
			<el-table-column align="center" label="主键" prop="id"/>
			<el-table-column align="center" label="流程名称" prop="bpmnLabel"/>
			<el-table-column align="center" label="流程定义 Key" prop="processDefinitionKey"/>
			<el-table-column align="center" label="部署时间" prop="deployTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.deployTime, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="版本号" prop="version"/>
			<el-table-column align="center" label="描述信息" prop="info" show-overflow-tooltip/>

			<el-table-column align="center" label="流程文件">
				<template slot-scope="scope">
					<el-button
						@click="bpmnView(scope.row.id)"
						size="mini"
						type="text"
						v-hasPermi="['workflow:bpmnInfo:readResource']">查看</el-button>
				</template>
			</el-table-column>

			<el-table-column align="center" label="流程图">
				<template slot-scope="scope">
					<el-button
						@click="imageView(scope.row.id)"
						size="mini"
						type="text"
						v-hasPermi="['workflow:bpmnInfo:readResource']">查看</el-button>
				</template>
			</el-table-column>

			<el-table-column align="center" class-name="small-padding fixed-width" label="操作">

				<template slot-scope="scope">
					<el-button
						@click="handleNodeList(scope.row.id)"
						icon="el-icon-s-custom"
						size="mini"
						type="text">流程节点列表</el-button>

					<el-button
						@click="handleDelete(scope.row)"
						icon="el-icon-delete"
						size="mini"
						type="text"
						v-hasPermi="['workflow:bpmnInfo:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList" v-show="total>0"/>

		<!-- 添加或修改流程定义信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" append-to-body width="500px">

			<el-form :model="form" :rules="rules" label-width="100px" ref="form">

				<el-form-item label="流程类型" prop="bpmnType">
					<el-select clearable placeholder="请选择流程类型" v-model="form.bpmnType">
						<el-option
							:key="dict.value"
							:label="dict.label"
							:value="dict.value"
							v-for="dict in dict.type.sys_audit_type"/>
					</el-select>
				</el-form-item>

				<el-form-item label="流程文件" prop="bpmnFile">
					<el-upload
						action="/"
						:limit="1"
						:file-list="fileList"
						:auto-upload="false"
						:on-change="fileChange">
						<el-button size="small" type="success">选择文件</el-button>
						<div slot="tip" class="el-upload__tip">只能上传bpmn/xml文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>

				<el-form-item label="备注" prop="info">
					<el-input type="textarea" placeholder="请输入备注信息" v-model="form.info"/>
				</el-form-item>

				<el-form-item prop="dictType">
					<el-input type="hidden" v-model="form.dictType"/>
				</el-form-item>
			</el-form>

			<div class="dialog-footer" slot="footer">
				<el-button @click="submitForm" type="primary">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 绘制 "流程定义" 对话框 -->
		<el-dialog title="流程图设计" :visible.sync="bpmnDesigner" append-to-body width="1200px">
			<!--
				overflow: hidden: 超过的部分进行隐藏
				product="activiti": 流程图的类型为 "activiti" ☆☆☆☆☆
			-->
			<vue-bpmn product="activiti" style="overflow: hidden; height: 570px"/>
		</el-dialog>

		<!-- 查看 "流程文件" 对话框 -->
		<el-dialog title="流程图" :visible.sync="bpmnImageDialog" append-to-body width="1200px">
			<div v-html="currentBpmnImage"/>
		</el-dialog>

		<!-- 查看 "流程图片" 对话框 -->
		<el-dialog title="流程文件" :visible.sync="bpmnDialog" append-to-body width="1200px">
			<xml-code-mirror :value="currentBpmnFile" :read-only="false"/>
		</el-dialog>
	</div>
</template>

<script>
	import {listBpmnInfo, delBpmnInfo, deploy, getResource} from "@/api/workflow/bpmnInfo";
	import VueBpmn from "@/components/bpmn/VueBpmn";
	import XmlCodeMirror from '@/components/XmlCodeMirror'

	export default {
		name: "BpmnInfo",
		dicts: ['sys_audit_type'],
		components: {
			VueBpmn,
			XmlCodeMirror
		},
		data() {
			return {
				/* 弹窗 */
				bpmnDesigner: false,
				bpmnImageDialog: false,
				bpmnDialog: false,

				// 当前 流程定义 的 图片数据
				currentBpmnImage: null,
				// 当前 流程定义 的 xml 数据
				currentBpmnFile: null,

				/* 文件上传 */
				fileList: [],

				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 流程定义信息表格数据
				bpmnInfoList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 描述信息时间范围
				daterangeDeployTime: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					bpmnType: null,
					deployTime: null,
				},
				// 表单参数
				form: {
					dictType: 'sys_audit_type',
				},
				// 表单校验
				rules: {
					bpmnType: [
						{ required: true, message: "请选择流程类型", trigger: "blur" }
					],
				}
			};
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询流程定义信息列表 */
			getList() {
				this.loading = true;
				this.queryParams.params = {};
				if (null != this.daterangeDeployTime && '' !== this.daterangeDeployTime) {
					this.queryParams.params["beginDeployTime"] = this.daterangeDeployTime[0];
					this.queryParams.params["endDeployTime"] = this.daterangeDeployTime[1];
				}
				listBpmnInfo(this.queryParams).then(response => {
					this.bpmnInfoList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			bpmnView(id) {
				let type = 'bpmn'
				// 发送请求到后端, 获取数据
				getResource(id, type).then(res => {
					this.currentBpmnFile = res
					this.bpmnDialog = true
				})
			},
			imageView(id) {
				let type = 'image'
				// 发送请求到后端, 获取数据
				getResource(id, type).then(res => {
					this.currentBpmnImage = res
					this.bpmnImageDialog = true
				})
			},

			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					bpmnLabel: null,
					bpmnType: null,
					processDefinitionKey: null,
					deployTime: null,
					version: null,
					info: null,
					dictType: 'sys_audit_type',
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.daterangeDeployTime = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			/** 新增按钮操作 */
			handleDeploy() {

				this.reset();
				this.open = true;
				this.title = "部署流程定义";
			},
			fileChange(file, fileList) {
				this.fileList = fileList
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						/* 表单校验通过, 部署流程文件 */
						// 如果不上传文件进行提示
						if (this.fileList.length <= 0) {
							this.$modal.msgError('请选择要部署的流程文件')
							return
						}

						/* 有上传文件 */
						let formData = new  FormData()
						formData.append('file',     this.fileList[0].raw)
						formData.append('bpmnType', this.form.bpmnType)
						formData.append('info',     this.form.info)
						formData.append('dictType', this.form.dictType)

						// 发起请求
						deploy(formData).then(res => {
							/*发起请求成功之后的操作*/
							// 刷新表格
							this.resetQuery()
							// 请求 fileList 的数据
							this.fileList = []
							// 关闭弹窗
							this.open = false
						})
					}
				});
			},
			// 跳转到 节点列表
			handleNodeList(id) {
				this.$router.push({path: `/flow/bpmnNode?id=${id}`})
			},

			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除流程定义信息编号为"' + ids + '"的数据项？并且把相关的流程节点数据也删除!!!').then(function () {
					return delBpmnInfo(ids);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
		}
	};
</script>
